<template>
  <div class="sheBeiZhuangTai">
      <div :id="id" class="pie"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
      id: {
          type: String,
          default: 'alldfff'
      }
  },
  data() {
      return {
          // id:'',
          options: {
              title: '',
              data: []
          }
      };
  },
  mounted() {
    //   this.initCharts();
  },
  methods: {
      // 柱状图
      initCharts() {
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById(this.id));
          // 实现相应式，跟随页面变化
          window.addEventListener("resize", () => {
              myChart.resize();
          });
          // 指定图表的配置项和数据
          var option = {
              legend: {
                  show: false,// 将图例设置为不显示
                  // orient: 'vertical',
                  // left: 'left'
              },
              title: {
                  text: this.options.title,
                  // subtext: '',
                  left: 'center',
                  textStyle: {
                      color: '#fff' // 设置标题字体颜色为红色
                  }
              },
              tooltip: {
                  trigger: 'item',
                  formatter: '{b}: {c} ({d}%)'
              },
              
              series: [
                  {
                      name: '设备状态',
                      type: 'pie',
                      radius: '70%',
                      data: this.options.data,
                      label: {
                          show: true,
                          position: 'inside', // 将标签显示在饼图内部
                          // alignTo: 'edge', // 触手指向饼图边缘
                          edgeDistance: '0%', // 触手与饼图的距离
                          formatter: '{d}%'
                      },
                      labelLine: {
                          show: true,
                          length: 20, // 触手的长度
                          length2: 20 // 触手的第二段长度
                      },
                      emphasis: {
                          itemStyle: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(0, 0, 0, 0.5)'
                          }
                      }
                  },
                  {
                      name: '设备状态',
                      type: 'pie',
                      radius: '60%',
                      data: this.options.data,
                      label: {
                          show: true,
                          position: 'outside', // 将标签显示在饼图外部
                          // alignTo: 'edge', // 触手指向饼图边缘
                          edgeDistance: '0%', // 触手与饼图的距离
                          formatter: function (params) {
                              // 自定义标签文字的显示格式
                              var name = params.name;
                              var maxLength = 2; // 设置最大显示长度为8个字
                              if (name.length > maxLength) {
                                  return name.substring(0, maxLength) + '...';
                              }
                              return name;
                          }
                      },
                      labelLine: {
                          show: true,
                          length: 20, // 触手的长度
                          length2: 20 // 触手的第二段长度
                      },
                      emphasis: {
                          itemStyle: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(0, 0, 0, 0.5)'
                          }
                      }
                  }
              ]
          };

          myChart.setOption(option);
      },
  },
};
</script>
<style>
.sheBeiZhuangTai {
  width: 100%;
  height: 100%;
  /* background-color: #fff; */
}

.pie {
  width: 100%;
  height: 100%;
  margin-top: 20px;
}
</style>